<template>
    <!-- 唐玉林209000622 -->
    <div class="content">
        <div class="title">
            <h3>城市:{{ city }}</h3>
            <p>今天:{{ update_time }}</p>
            <span>{{ wea }}</span>
        </div>

        <ul>
            <li v-for="(item, index) in weatherList" :key="index">
                <p>{{ item.date }}</p>
                <img :src="getImgUlr(item.wea_img)" alt="">
                <p>{{ item.week }}</p>
                <p>{{ item.wea }}</p>
                <span>{{ item.tem2 }}℃~{{ item.tem1 }}℃</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import qing from "../assets/img/qing.png"
import yun from "../assets/img/yun.png"
let weatherList = ref([])
const city = ref('')
const update_time = ref('')
const wea = ref('')
const getImgUlr = (url) => {
    if (url == 'qing') {
        return qing
    } else {
        return yun
    }
}


axios({
    url: 'https://v0.yiketianqi.com/api?unescape=1&version=v9&appid=57584477&appsecret=KM2jp7kv',
    method: 'get'
}).then((req) => {
    console.log(req.data)
    city.value = req.data.city
    weatherList.value = req.data.data
    update_time.value = weatherList.value[0].date
    wea.value = weatherList.value[0].wea

})
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

ul,
li {
    list-style-type: none;
    margin-bottom: 20px;
    text-align: center;
}

.content {
    margin: 10px auto;

}

ul {
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

li {
    flex: 0 0 250px;
    border: 1px solid black;
}

.title {
    text-align: center;
}
</style>